<template>
  <div class="container">
    <div style="margin-right: 100px">
      <Logo />
      <h5 class="title">Input basic information to register.</h5>
    </div>
    <div class="register_box">
      <!--            头像-->
      <!--            注册表单-->
      <el-form ref="registerFormRef" :model="registerForm" :rules="rules" class="register_form" label-width="60px" style="width: 400px">
        <!--                用户名-->
        <el-form-item label="账号" prop="username">
        <el-input v-model="registerForm.username"></el-input>
      </el-form-item>
        <el-form-item label="昵称" prop="username">
          <el-input v-model="registerForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="username">
          <el-input v-model="registerForm.dairy"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="username">
          <el-input v-model="registerForm.email"></el-input>
        </el-form-item>
        <!--                密码-->
        <el-form-item label="密码" prop="pwd">
          <el-input v-model="registerForm.pwd" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认" prop="pwd">
          <el-input v-model="registerForm.confirm" type="password"></el-input>
        </el-form-item>
        <!--                按钮区域-->
        <el-form-item class="btns">
          <el-button @click="$router.push('/')">取消</el-button>
          <el-button type="primary" @click="doRegister">确定</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
  import logo from "../../components/Logo"
export default {
  name: "Register",
  components:{logo},
  data(){
    return{
      dialogVisible:false,
      registerForm:{
        username:"",
        nickname:"",
        pwd:"",
        confirm:"",
        dairy:'',
        email:'',
      },
      rules:{
        username:[
          {required :true , message: '请输入用户账户' ,trigger:'blur'},
          {min: 3,max:10,message: '长度在3到10个字符之间',trigger: 'blur'}
        ],
        pwd:[
          {required :true , message:'请输入密码' ,trigger:'blur'},
          {min: 3,max:6,message:'长度在3到6个字符之间',trigger: 'blur'}
        ]
      }
    }
  },
  methods:{
    doRegister(){
      if(this.registerForm.confirm!==this.registerForm.pwd){
        this.$message.error('密码错误')
        return
      }
      this.$axios.post('/register',
        {
          'username':this.registerForm.username,
          'password':this.registerForm.pwd,
          'realname':this.registerForm.nickname,
          'userrole':'0',
          spotid:'',
          'userdial':this.registerForm.dairy,
          'useremail':this.registerForm.email,
        }).then(res=>{
        if(res.data.code){
          this.$message.error('出错了')
          return
        }
        this.$message.info('注册成功')
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .container {
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .title {
    font-family:
      'Quicksand',
      'Source Sans Pro',
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      'Helvetica Neue',
      Arial,
      sans-serif;
    display: block;
    font-weight: 300;
    font-size: 30px;
    color: #35495e;
    letter-spacing: 1px;
  }
</style>
